<template>
  <!-- 评论列表页(显示所有评论内容) -->
  <div>
    <!-- 1.头部文字 -->
    <topNav titleText="精彩跟帖"></topNav>
    <!-- 2.递归父组件 -->
    <comment
      @callReply="callReply"
      class="comment"
      :commentData="item"
      v-for="(item,index) in list"
      :key="index"
    ></comment>

    <!-- 3.暂时没有跟帖 -->
    <div class="null" v-if="list&&list.length==0">暂时没有跟帖</div>
    <!-- 4.底线 -->
    <div class="more">我也是有底线的</div>

    <!-- 5.评论输入框组件 -->
    <commentInput :parentInfo="{}"></commentInput>
    <!-- 4-4 评论输入框 -->
    <commentInput @reloadComment="loadComment" ref="commentInput" :parentInfo=" commentInfo"></commentInput>
  </div>
</template>

<script>
//引入递归组件A
import comment from "../components/recursion/comment";
//引入头部组件
import topNav from "@/components/topNav";
//引入评论输入框组件
import commentInput from "@/components/commentInput";
export default {
  //挂载组件
  components: {
    comment,
    topNav,
    commentInput
    // tapNav
  },
  //创建vue钩子
  created() {
    //一创键成功就发axios
    this.loadComment();
  },
  props: ["titleText"],
  data() {
    return {
      list: [],
      //评论id
      commentInfo: {}
    };
  },
  //方法
  methods: {
    //子传父数据存储
    callReply(commentInfo) {
      //1.将id存起来交给输入框组件
      this.commentInfo = commentInfo;
      console.log("获取到数据了");
      console.log(this.commentInfo);

      //2.显示输入框，调用commentInput子组件的 showTextarea函数
      this.$refs.commentInput.showTextarea();
    },
    //页面刷新
    loadComment() {
      //一创键成功就发axios
      this.$axios({
        url: "/post_comment/" + this.$route.params.id
      }).then(res => {
        console.log(res.data);
        //获取数据，将得到的数据存储到data
        this.list = res.data.data;
      });
    }
  }
};
</script>

<style lang="less" scoped>
//递归父组件样式
.comment {
  padding: 4.167vw 0;
  border-bottom: 0.556vw solid #ccc;
}
//暂时没有跟帖文字样式
.null {
  font-size: 5vw;
  padding: 22.222vw;
  text-align: center;
}
//跟帖边框底线
.more {
  padding: 5.556vw;
  text-align: center;
  font-size: 4.444vw;
}
</style>